
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>中纺互联</title>
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<style>
			.mui-backdrop {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 998;
				background-color: rgba(0,0,0,.3);
			}
			header{
				background: #fff;
				font-size: 16px;
			}
			.aui-nav .aui-bar-tab {
				border-top: 1px solid #eee;
			}
			.title2{
				text-align: center;
				padding: 10px;
				position: relative;
			}
			.edit{
				position: absolute;
				right: 15px;
				font-size: 12px;
				top: 50%;
				margin-top:-6px;
				z-index: 999;
			}
			.hidde{
				display: none;
			}
			.showHeader{
				display: block;
			}
			.header1{
				/*padding:10px 10px;*/
				line-height: 45px;
				height: 45px;
			}
			.header1 .aui-title{
				left: 80px;
				right:80px;
				width: auto !important;
			}
			.header1 .aui-iconfont{
				font-size: 18px;
				line-height: 45px;
				height: 45px;
				padding-left:10px;
			}
			/*人脉圈*/
			.header3{
				background: #327afa;
				position: relative;
				padding: 12px;
			}
			.header3 .aui-tab-nav.aui-tab-border{
			    border-color:#fff;
			}
			.header3 .aui-tab-nav.aui-tab-border li{
			    height: 35px;
			    line-height: 35px !important;
			    color:#fff;
			    background: transparent;
			}
			.header3 .aui-list-view{
			    margin-bottom: 8px;
			}
			.header3  .aui-tab-nav.aui-tab-border li.active{
			    color: #327afa;
			    background: #fff;
			    border-bottom: 2px #327afa solid;
			}
			.header3 .header-icon{
			    position: absolute;
			    top:50%;
			    margin-top: -16px;
			    right: 15px;
			    color:#fff;
			}
			.header3 .header-icon .aui-icon-add{
			    margin-right:8px;
			}
			.aui-icon-add{
				border: 5px solid transparent;
			}
			.header3 .header-icon .aui-iconfont{
			    font-size: 20px;
			}
			.header3 .aui-tab-nav{
				width: 50%;
				margin: 0 auto;
				font-size: 13px;
				border:1px solid #fff;
				height: 35px;
				line-height: 35px !important;
			}
			.aui-nav .aui-bar-tab .active{
				color:#327afa;
			}
		</style>
	</head>
	<body>
		<header class="" id="aui-header aui-border-b">
			<!-- 首页 -->
			<div class=" header1  hidde aui-border-b" id="header-title">
				<div class="aui-pull-left aui-iconfont aui-icon-sort icon-left-coler" tapmode onclick="openToTwo('html/fenlei_win')"></div>
				<div class="aui-title">
				    中纺互联
				</div>
			</div>
			<!-- 动态圈 -->
			<div class="divHeader header2 hidde">
				<div class="aui-tab">
					<ul class="aui-tab-nav">
				        <li class="active" data-type="1" tapmode onclick="changeHeader2(this)">动态</li>
				        <li  data-type="2" tapmode onclick="changeHeader2(this)">热门</li>
				    </ul>
				</div>
			</div>
			<!-- 人脉圈 -->
		    <div class="aui-tab header3 hidde">
		        <ul class="aui-tab-nav aui-tab-border headType">
		            <li class="active" data-type="1" tapmode onclick="headerChange(this)">行业人脉</li>
		            <li  data-type="2"  tapmode onclick="headerChange(this)">我的人脉</li>
		        </ul>
		        <div class="header-icon ">
				    <i class="aui-iconfont aui-icon-add  " tapmode onclick="changeAvatar()"></i>
				    <i class="aui-iconfont aui-icon-cameraadd "></i>
			    </div>
		    </div>
			<!-- 进货单 -->
			<div class="title2 header4 hidde aui-border-b">
				<span>进货单</span>
				<span class="edit " tapmode onclick="edit(this)">编辑</span>
			</div>
		</header>
		<footer class="aui-nav" id="aui-footer">
			<ul class="aui-bar-tab">
				<li class="active" id="tabbar1" tapmode onclick="randomSwitchBtn(this,'首页',0)">
					<span class="aui-iconfont aui-icon-home"></span>
					<p>
						首页
					</p>
				</li>
				<li id="tabbar2" tapmode onclick="randomSwitchBtn(this,'动态圈',1)">
					<span class="aui-iconfont aui-icon-read"></span>
					<p>
						动态圈
					</p>
				</li>
				<li id="tabbar3" tapmode onclick="randomSwitchBtn(this,'人脉圈',2)">
					<span class="aui-iconfont aui-icon-friend"></span>
					<p>
						人脉圈
					</p>
				</li>
				<li id="tabbar4" tapmode onclick="randomSwitchBtn(this,'进货单',3)">
					<span class="aui-iconfont aui-icon-form"></span>
					<p>
						进货单
					</p>
				</li>
				<li id="tabbar5" tapmode onclick="randomSwitchBtn(this,'',4)">
					<span class="aui-iconfont aui-icon-my"></span>
					<p>
						我的
					</p>
				</li>
			</ul>
		</footer>
	</body>
	<script type="text/javascript" src="script/api.js"></script>
	<script type="text/javascript" src="script/common.js"></script>
	<script type="text/javascript" src="script/myInfo.js"></script>
	<script type="text/javascript" src="script/mui.js"></script>
	<script type="text/javascript" src="script/jquery-1.11.3.js"></script>
	<script type="text/javascript">
		apiready = function() {
			$api.clearStorage();
			back();
			//isLogin();
			api.parseTapmode();
			var header = $api.dom('header');
			//$api.fixStatusBar(header);
			api.setStatusBarStyle({
                  style : 'light'
            });
            mask=mui.createMask();//遮罩
			header_h = $api.offset(header).h;
			body_h = $api.offset($api.dom('body')).h;
		    footer_h = $api.offset($api.byId('aui-footer')).h;
			api.openFrameGroup({
				name : 'footer_tab_nav',
				scrollEnabled : false,
				rect : {
					x : 0,
					y : header_h,
					//y: 0,
					w : 'auto',
					h : body_h - header_h - footer_h
					//h : body_h - footer_h
				},
				index : 0,
				preload : 2,
				frames : [{
					name : 'footer_tab_1',
					url : 'html/footer_tab_1.html',
					bounces : false,
					vScrollBarEnabled : false,
					hScrollBarEnabled : false
				}, {
					name : 'footer_tab_2',
					url : 'html/footer_tab_2.html',
					bounces : true,
					vScrollBarEnabled : false,
					hScrollBarEnabled : false
				}, {
					name : 'footer_tab_3',
					url : 'html/footer_tab_3.html',
					bounces : false,
					vScrollBarEnabled : false,
					hScrollBarEnabled : false
				}, {
					name : 'footer_tab_4',
					url : 'html/footer_tab_4.html',
					bounces : false,
					vScrollBarEnabled : false,
					hScrollBarEnabled : false
				}, {
					name : 'footer_tab_5',
					url : 'html/footer_tab_5.html',
					bounces : false,
					vScrollBarEnabled : false,
					hScrollBarEnabled : false
				}]
			}, function(ret, err) {
				var footer = $api.byId('aui-footer');
				var footerAct = $api.dom(footer, '.aui-bar-tab li.active');
				$api.removeCls(footerAct, 'active');
				var name = ret.name;
				var index = ret.index;
					showHeader(index);
					header_h=$("header").height();
				if (index == 0) {
					$api.addCls($api.byId('tabbar1'), 'active');
					api.setFrameGroupAttr({
					    name: 'footer_tab_nav',
					    rect : {
							x : 0, y : header_h, w : 'auto', h : body_h - header_h - footer_h
						}
					});
				} else if (index == 1) {
					$api.addCls($api.byId('tabbar2'), 'active');
					api.setFrameGroupAttr({
					    name: 'footer_tab_nav',
					    rect : {
							x : 0, y : header_h, w : 'auto', h : body_h - header_h - footer_h
						}
					});
				} else if (index == 2) {
					$api.addCls($api.byId('tabbar3'), 'active');
					api.setFrameGroupAttr({
					    name: 'footer_tab_nav',
					    rect : {
							x : 0, y : header_h, w : 'auto', h : body_h - header_h - footer_h
						}
					});
				} else if (index == 3) {
					// $api.text($api.byId('header-title'), '进货单');
					$api.addCls($api.byId('tabbar4'), 'active');
					api.setFrameGroupAttr({
					    name: 'footer_tab_nav',
					    rect : {
							x : 0, y : header_h, w : 'auto', h : body_h - header_h - footer_h
						}
					});
					// $(".header1").css({"display":"none"})
				} else if (index == 4) {
					$api.addCls($api.byId('tabbar5'), 'active');
					api.setFrameGroupAttr({
					    name: 'footer_tab_nav',
					    rect : {
							x : 0, y : 0, w : 'auto', h : body_h - header_h - footer_h
						}
					});
				}
			});
			//重新登录监听
			api.addEventListener({
				name : 'reGetMyInfo'
			}, function(ret) {
				if (ret && ret.value) {
					isLogin();
				}
			});
			//监听云修复
			api.addEventListener({
				name : 'smartupdatefinish'
			}, function(ret, err) {
				api.toast({
					msg : '系统有新的更新了，请重新启动查看',
					duration : 2000,
					location : 'bottom'
				});
			});
			//网络断开的监听
			api.addEventListener({
				name : 'offline'
			}, function(ret, err) {
				api.toast({
					msg : '网络连接失败请检查您的网络',
					duration : 2000,
					location : 'bottom'
				});
			});
			// 选择颜色时候隐藏上下
			api.addEventListener({
				name:"showColor"
			},function(ret){
				if(ret&&ret.value){
					showColor();
				}
			})
			// 关闭颜色
			api.addEventListener({
				name:"closeColor"
			},function(ret){
				if(ret&&ret.value){
					closeColor();
				}
			})
		}
		function randomSwitchBtn(obj, name, index) {
			getStorageAll();
			user_id="d";
			if (!user_id && index > 1) {
				api.openWin({
					name : 'loginPass_win',
					url : 'html/loginPass_win.html'
				})
			} else {
				// $api.text($api.byId('header-title'), name);
				var footer = $api.byId('aui-footer');
				var footerAct = $api.dom(footer, '.aui-bar-tab li.active');
				$api.removeCls(footerAct, 'active');
				$api.addCls(obj, 'active');
				api.setFrameGroupIndex({
					name : 'footer_tab_nav',
					index : index,
					scroll : true,
					reload : false
				});
			}
		}
		// 人脉圈的操作
		function changeAvatar(){
			api.execScript({
				frameName:'footer_tab_3',
				script:"changeAvatar()"
			})
		}
		// 人脉圈头部切换
		function headerChange(obj){
			$(obj).parent().children("li").removeClass("active");
			$(obj).addClass("active");
			var dataType=$(obj).attr("data-type");
			api.execScript({
				frameName:'footer_tab_3',
				script:"headerChange("+dataType+")"
			})

		}
		function randomSwitchBtnBakHome(index) {
			var footer = $api.byId('aui-footer');
			var footerAct = $api.dom(footer, '.aui-bar-tab li.active');
			$api.removeCls(footerAct, 'active');
			$api.addCls($api.byId('tabbar' + (index + 1)), 'active');
			api.setFrameGroupIndex({
				name : 'footer_tab_nav',
				index : index,
				scroll : true,
				reload : false
			});
		}

		//判断是否登录
		function isLogin() {
			getStorageAll();
			if (!user_id) {
				api.openWin({
					name : 'loginPass_win',
					url : 'html/loginPass_win.html',
					delay : 300
				})
			} else {
				//更新位置信息
				updateLocation();
			}
		}
		//显示不同的header
		function showHeader(type){
			$(".hidde").removeClass("showHeader");
			$(".header"+(parseInt(type)+1)).addClass("showHeader");
		}

		//动态圈的页头处理
		function changeHeader2(obj){
			$(obj).parent().find("li").removeClass("active");
			$(obj).addClass("active");
			var type=$(obj).attr("data-type");
			api.execScript({
				frameName:"footer_tab_2",
				script:'switchChange("'+type+'")'
			})
		}
		// 执行进货单的edit方法
		function edit(obj){
			var type="";
			if($(obj).text()=="编辑"){
				$(obj).text("完成");
				type="editing";
			}else{
				$(obj).text("编辑");
			}
			api.execScript({
				frameName:'footer_tab_4',
				script:'edit("'+type+'")'
			})
		}
		//在进货单页面单击选择颜色时候的跨域，弹出操作
		function showColor(){
			api.setFrameGroupAttr({
				name:"footer_tab_nav",
				rect:{
					x : 0, 
					y : 0, 
					w : 'auto',
					h : 'auto'
				}
			})
		}

		// 在进货单页面单击选择颜色时候的跨域，关闭操作
		function closeColor(){
			api.setFrameGroupAttr({
				name:"footer_tab_nav",
				rect:{
					x : 0, 
					y : header_h, 
					w : 'auto', 
					h : body_h - header_h - footer_h
				}
			})
		}
		//执行跨域弹出遮罩层
		function  showLayer() {
            mask.show();
        }
        //执行跨域关闭遮罩层
        function  closeLayer() {
            mask.myclose();
        }
	</script>
</html>